// src/store/search.js
import { defineStore } from 'pinia';
import axios from 'axios'; // 引入 Axios（若用本地数据可删除）

// 定义并导出 Pinia 仓库
export const useSearchStore = defineStore('search', {
  state: () => ({
    keyword: localStorage.getItem('searchKeyword') || '', // 搜索关键词（本地存储持久化）
    results: [], // 搜索结果
    isLoading: false, // 加载状态
    isEmpty: false, // 无结果状态
  }),
  actions: {
    // 更新搜索关键词（并持久化到本地存储）
    updateKeyword(val) {
      this.keyword = val.trim();
      localStorage.setItem('searchKeyword', this.keyword);
    },

    // 清空搜索（关键词+结果）
    clearSearch() {
      this.keyword = '';
      this.results = [];
      this.isEmpty = false;
      localStorage.removeItem('searchKeyword');
    },

    // 核心：发送搜索请求（支持接口请求/本地数据过滤）
    async fetchSearchResults() {
      // 空关键词直接清空结果
      if (!this.keyword) {
        this.results = [];
        this.isEmpty = false;
        return;
      }

      this.isLoading = true; // 开始加载
      try {
        // 方案1：调用后端接口（推荐，替换为你的真实接口）
        const res = await axios.get('/api/search', {
          params: { keyword: this.keyword }, // 传递关键词参数
        });
        this.results = res.data.data; // 适配接口返回格式（需按实际调整）

        // 方案2：本地模拟数据（无需接口，注释上方代码，解开下方注释）
        // const mockData = [
        //   { id: 1, title: 'Vue3 官方文档', desc: 'Vue3 最新语法、组合式API详解' },
        //   { id: 2, title: 'Pinia 状态管理', desc: 'Vue3 替代 Vuex 的轻量状态管理库' },
        //   { id: 3, title: 'Axios 请求教程', desc: '前端异步请求最佳实践' },
        // ];
        // // 本地过滤模拟搜索
        // this.results = mockData.filter(item => 
        //   item.title.includes(this.keyword) || item.desc.includes(this.keyword)
        // );

        // 判断是否无结果
        this.isEmpty = this.results.length === 0;
      } catch (err) {
        console.error('搜索请求失败：', err);
        this.results = [];
        this.isEmpty = true;
      } finally {
        this.isLoading = false; // 结束加载
      }
    },
  },
});